let translatedFileName

window.onload = function () {

    const form = document.querySelector('form');

    form.onsubmit = function (e) {
        e.preventDefault();

        const file = document.querySelector('[name="file"]');
        const language = document.querySelector('[name="target_language"]');
        const format = document.querySelector('[name="target_format"]');
        const downloadButton = document.querySelector('.download-button');
        const loadingAnimation = document.getElementById('loadingAnimation')
        let message = document.getElementById('message');

        // Validation
        if (!file.value || !language.value || !format.value) {
            alert('所有字段均为必填项!');
            return;
        }

        // 翻译中
        loadingAnimation.style.display = "block";
        document.getElementById('submit-button').disabled = true;

        const formData = new FormData(form);

        fetch(form.action, {
            method: 'POST', body: formData
        }).then(function (response) {
            if (!response.ok) {
                alert('翻译失败：' + JSON.stringify(data, null, 4));
            }
            return response.json();
        }).then(function (data) {
            translatedFileName = JSON.parse(JSON.stringify(data, null, 4))['translatedFileName'];

            message.classList.remove('hide');
            message.classList.add('show');
            downloadButton.style.display = 'block';

            file.disabled = true;
            language.disabled = true;
            format.disabled = true;
            document.getElementById('submit-button').disabled = true;
        }).catch(function (error) {
            // If there is any error you will catch them here
            alert('出错了：' + error);
        }).finally(() => {
            loadingAnimation.style.display = "none";
        });
    };

};

async function getFileUrl(fileName) {
    const response = await fetch(`http://localhost:5000/download?filename=${fileName}`, {
        method: 'GET',
    });

    const blob = await response.blob();
    return window.URL.createObjectURL(blob);
}

function downloadFile(url, fileName) {
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

async function handleDownload() {
    const url = await getFileUrl(translatedFileName);
    downloadFile(url, translatedFileName);

    const downloadButton = document.querySelector('.download-button');
    downloadButton.style.display = 'none';
    document.getElementById('submit-button').disabled = false;
    document.querySelector('form').reset();

    const file = document.querySelector('[name="file"]');
    const language = document.querySelector('[name="target_language"]');
    const format = document.querySelector('[name="target_format"]');
    file.disabled = false;
    language.disabled = false;
    format.disabled = false;

    let message = document.getElementById('message');
    message.classList.remove('show');
    message.classList.add('hide');
}